<template>
  <div class="rating-stars" :class="{ interactive: interactive }">
    <div class="flex items-center gap-1">
      <button
        v-for="star in 5"
        :key="star"
        type="button"
        class="star-button"
        :class="{ filled: star <= currentRating, interactive: interactive }"
        :disabled="!interactive"
        @click="handleClick(star)"
        @mouseenter="interactive && handleHover(star)"
        @mouseleave="interactive && handleHover(0)"
      >
        <svg
          class="star-icon"
          :class="{ 
            'text-yellow-400': star <= currentRating,
            'text-gray-300': star > currentRating,
            'hover:text-yellow-300': interactive && star <= hoverRating
          }"
          fill="currentColor"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
          />
        </svg>
      </button>
      
      <span v-if="showValue" class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">
        {{ displayValue }}
      </span>
      
      <span v-if="showCount && count !== undefined" class="ml-1 text-sm text-gray-500 dark:text-gray-400">
        ({{ count }})
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const props = defineProps<{
  modelValue?: number
  interactive?: boolean
  showValue?: boolean
  showCount?: boolean
  count?: number
  size?: 'sm' | 'md' | 'lg'
}>()

const emit = defineEmits<{
  'update:modelValue': [value: number]
}>()

const hoverRating = ref(0)

const currentRating = computed(() => {
  if (props.interactive && hoverRating.value > 0) {
    return hoverRating.value
  }
  return props.modelValue || 0
})

const displayValue = computed(() => {
  return currentRating.value.toFixed(1)
})

const handleClick = (rating: number) => {
  if (props.interactive) {
    emit('update:modelValue', rating)
  }
}

const handleHover = (rating: number) => {
  hoverRating.value = rating
}
</script>

<style scoped>
.star-button {
  @apply cursor-default transition-transform;
}

.star-button.interactive {
  @apply cursor-pointer;
}

.star-button.interactive:hover {
  @apply transform scale-110;
}

.star-icon {
  @apply w-5 h-5 transition-colors;
}

.rating-stars.interactive .star-icon {
  @apply w-6 h-6;
}
</style>

